<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" @up="upCallback" :down="downOption">
			<view v-for="(item, index) in goodsList" :key="index" :id="index">
				<view class="list-info" @click="onItemClick(item.pid)">
					<image :src="item.cover" class="item-img" mode="aspectFill"></image>
					<view style="display: flex;flex-direction: column;flex: 1;margin-right: 32rpx;">
						<view class="item-title">{{item.title}}</view>
						<view style="display: flex;margin-top: 10rpx;">
							<text class="item-store">{{item.shop.name}}  </text>
							<text class="item-store">{{item.shop.score}}分</text>
						</view>
						<view style="display: flex;">
							<view style="display: flex;flex-direction: column;flex: 1;">
								<view style="display: flex;margin-top: 18rpx;font-size: 24rpx;">
									<text style="color: #666666;margin-top: 4rpx;">赚</text>
									<text style="color: #EE0A24;margin-left: 4rpx;margin-top: 4rpx;">¥</text>
									<text style="color: #EE0A24;font-size: 28rpx;">{{item.kolCosFee}}</text>
								</view>
								<view style="display: flex;margin-top: 8rpx;font-size: 20rpx;color: #999999">
									<text style="margin-right: 20rpx;">售价：¥{{item.price}}</text>
									<text >佣金率：{{item.kolCosRatio}}%</text>
								</view>
							</view>
							<view style="display: flex;flex-direction: column;">
								<view style="flex: 1;"></view>
								<text class="item-showcase-btn" @click.stop="cancelCollectClick(item.pid)">取消收藏</text>
							</view>	
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<uniPopup ref="showComfirmPop" type="center" style="z-index: 9991;position: fixed;top: --window-top;left: 0;">
			<view class="pop-group"> 
				<text class="pop-title">取消收藏</text>
				<text class="pop-content">确认取消后商品将从我的收藏列表出移除，请确认是否取消</text>
				<view style="display: flex;width: 100%;">
					<view class="pop-btn-cancel" @click="cancelClick()">取消</view>
					<view class="pop-btn-sure" @click="confirmClick()">确认</view>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import configUrls from '@/common/config.js';
	export default {
		mixins: [MescrollMixin],
		components:{
			uniPopup
		},
		data() {
			return {
				upOption:{
					noMoreSize: 10,
					empty:{
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有数据', 
					},
					textNoMore: '没有更多'
				},
				downOption: {
					native: true,
				},
				goodsList: [],
				currentId: "",
			}
		},
		onLoad() {
		},
		methods: {
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getCollectList, {
					page: page.num,
					limit: 10,
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result.data;
						if (respData == null) {
							that.mescroll.endSuccess(0);
						    return;
						}
						that.mescroll.endSuccess(respData.length);
						if(page.num == 1) that.goodsList = []; 
						that.goodsList=that.goodsList.concat(respData);
					} else {
						that.goodsList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			onItemClick(id) {
				uni.navigateTo({
					url:'/subpages/pages/selectionDetail?goodsId='+id
				})
			},
			cancelCollectClick(id) {
				this.currentId = id;
				this.$nextTick(() => {
				    this.$refs['showComfirmPop'].open();
				})
			},
			confirmClick:function(){
				this.$Request.postJsonLoadView(configUrls.cancelCollect, {
					targetId: this.currentId,
					targetType: 1,
				}).then(res => {
					this.$nextTick(() => {
					    this.$refs['showComfirmPop'].close();
					})
					if (res.code == "10000") {
						this.mescroll.resetUpScroll();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			cancelClick:function(){
				this.$nextTick(() => {
				    this.$refs['showComfirmPop'].close();
				})
			},
		}
	}
</script>

<style>
	@import url("../../css/mine/collect.css");
</style>